import router from '@/router';

import { reactive, ref, watch } from 'vue';
import { purmamPage } from '@api/url/test';
import { getInitParam, queryDataFilter } from '@utils/baseMethods';

export default function importConfig() {
  const data = ref([]);

  const base = reactive<any>({
    size: 'medium',
    columns: [
      {
        title: '产品物料编码',
        dataIndex: 'company',
        checked: true,
      },
      {
        title: '产品物料名称',
        dataIndex: 'creator',
        checked: true,
      },
      {
        title: '规格型号',
        dataIndex: 'ma001',
        checked: true,
      },
      {
        title: '在库数量',
        dataIndex: 'ma002',
        checked: true,
      },
      {
        title: '仓库',
        dataIndex: 'ma003',
        checked: true,
      },
      {
        title: '库区',
        dataIndex: 'ma011',
        checked: true,
      },
      {
        title: '库位',
        dataIndex: 'ma012',
        checked: true,
      },
      {
        title: '供应商编号',
        dataIndex: 'ma013',
        checked: true,
      },
      {
        title: '供应商名称',
        dataIndex: 'ma013',
        checked: true,
      },
      {
        title: '供应商简称',
        dataIndex: 'ma013',
        checked: true,
      },
      {
        title: '生产入库',
        dataIndex: 'ma013',
        checked: true,
      },
      {
        title: '入库时间',
        dataIndex: 'ma013',
        checked: true,
      },
      {
        title: '库存有效期',
        dataIndex: 'ma013',
        checked: true,
      },
    ],
    searchConfig: null,
    config: [],
    pagination: {
      defaultPageSize: 10,
      total: 1, //总条数
      current: 1,
      pageSize: 10,
      showTotal: true,
      showPageSize: true,
      pageSizeOptions: [10, 20, 30, 40, 50],
    },
    editVisible: false,
    treeData: [
      {
        title: 'Trunk 0-0',
        key: '0-0',
        children: [
          {
            title: 'Branch 0-0-0',
            key: '0-0-0',
            children: [
              {
                title: 'Leaf',
                key: '0-0-0-0',
              },
              {
                title: 'Leaf',
                key: '0-0-0-1',
              },
            ],
          },
          {
            title: 'Branch 0-0-1',
            key: '0-0-1',
            children: [
              {
                title: 'Leaf',
                key: '0-0-1-0',
              },
            ],
          },
        ],
      },
    ],
    showSearchBar: true,
    searchBar: '隐藏搜索',
  });

  const collection = reactive([
    { label: '产品物料编码', value: '', key: 'COMPANY', placeholder: '请输入产品物料编码', isInput: true },
    { label: '产品物料名称', value: '', key: 'CREATOR', placeholder: '请输入产品物料名称', isInput: true },
    { label: '入库批次', value: '', key: 'MA001', placeholder: '请输入入库批次', isInput: true },
    { label: '仓库名称', value: '', key: 'MA003', placeholder: '请输入仓库名称', isInput: true },
    { label: '供应商编号', value: '', key: 'MA012', placeholder: '请输入供应商编号', isInput: true },
    { label: '供应商名称', value: '', key: 'MA013', placeholder: '请输入供应商名称', isInput: true },
    { label: '库存有效期', value: '', key: 'MA013', isRangePicker: true },
  ]);

  // watch(() => base.column)
  const opArticleNumber = () => {
    router.push('/numberConfiguration');
  };

  /**
   * @exports searchConfig 搜索栏配置表
   */
  const searchConfig = () => {
    return [
      {
        label: '公司名称',
        key: 'COMPANY',
        placeholder: '请输入公司名称',
        value: null,
      },
      {
        label: '创建人',
        key: 'CREATOR',
        placeholder: '请输入创建人',
        value: null,
      },
      {
        label: '供应商ID',
        key: 'MA001',
        placeholder: '请输入供应商ID',
        value: null,
      },
      {
        label: '供应商名称',
        key: 'MA003',
        placeholder: '请输入供应商名称',
        value: null,
      },
      {
        label: '负责人',
        key: 'MA011',
        placeholder: '请输入供应商负责人',
        value: null,
      },
      {
        label: '负责人号码',
        key: 'MA011',
        placeholder: '请输入供应商负责人的手机号',
        value: null,
      },
    ];
  };

  const getTableData = (flag: string) => {
    if (flag == 'search') {
      base.pagination.current = 1;
      base.pagination.pageSize = 10;
    }
    const reqParam = {
      page: base.pagination.current,
      pageSize: base.pagination.pageSize,
    };
    let req = getInitParam(queryDataFilter(collection));
    req = Object.assign(...req, reqParam);
    purmamPage(req).then((res) => {
      data.value = res.data.records;
      base.pagination.total = res.data.total;
    });
  };

  const init = () => {
    base.searchConfig = searchConfig();
    getTableData('search');
  };

  const tapDate = () => {
    getTableData('search');
  };

  const handlePageChange = (page: number) => {
    base.pagination.current = page;
    getTableData('handleChange');
    // init();
  };
  const handlePageSizeChange = (pageSize: number) => {
    base.pagination.pageSize = pageSize;
    getTableData('handleChange');
    // init();
  };

  const edit = () => {
    base.editVisible = true;
  };

  //搜索分类
  const goSearch = () => {};
  //控制搜索框的显示与隐藏
  const changeSearchBar = () => {
    base.showSearchBar = !base.showSearchBar;
    if (base.showSearchBar) {
      base.searchBar = '隐藏搜索';
    } else {
      base.searchBar = '显示搜索';
    }
  };

  return {
    base,
    collection,
    opArticleNumber,
    data,
    init,
    tapDate,
    handlePageChange,
    handlePageSizeChange,
    edit,
    goSearch,
    changeSearchBar,
  };
}
